<template>
	<div class="input-container">
		<h3>发表评论</h3>
		<hr class="lineHeight" />
		<textarea maxlength="120" v-model="contents" placeholder="请详细描述你的问题和意见..."></textarea>
		<mt-button type="primary" @click="putComs()" size="large">发表评论</mt-button>
		
		<div class="cmt-list" v-for="(item,i) in message" :key="item.diid">
			<div class="cmt-title">
				第{{i+1}}楼&nbsp;&nbsp;<span>用户：匿名用户</span>&nbsp;&nbsp;<span>发表时间：{{item.didates}}</span>
			</div>
			<div class="cmt-body">
				{{item.dicontent}}
			</div>
		</div>
		
		<mt-button type="danger" @click="getList()" size="large" plain>加载更多</mt-button>
	</div>
</template>

<script>
import { Toast,Indicator } from 'mint-ui';
	export default {
		data(){
			return {
				id:this.$route.params.id,
				indexs:0,
				message:[],
				contents:''
			}
		},
		created(){
			this.getList();
		},
		methods:{
			getList(){
				Indicator.open({
  					text: '加载中...',
  					spinnerType: 'fading-circle'
				});
				this.indexs++;
				this.$http.get('lists/getContent/id/'+this.id+'/index/'+this.indexs).then(result=>{
					//console.log(result);
					if(result.body.data==''&&this.indexs!=1){
						Toast('这是我的底线了，评论已经没有了！！！');
						return Indicator.close();
					}
					this.message=this.message.concat(result.body.data);
					Indicator.close();
				})
			},
			putComs(){
				if(this.contents==''){
					Toast('评论不能为空！！！');
				}else{
					Indicator.open({
  						text: '加载中...',
  						spinnerType: 'fading-circle'
					});
					this.$http.post('posts/putComments',{deid:this.id,content:this.contents}).then(result=>{
						this.message.unshift(result.body.data);
						this.contents='';
						Indicator.close();
						//console.log(this.message);
					})
				}
			}
		},
	}
</script>

<style scoped="scoped">
	.lineHeight{
		border: 2px solid green;
	}
	.input-container h3{
		font-size: 18px;
	}
	textarea{
		font-size: 14px;
		height: 85px;
		margin: 0;
	}
	.cmt-list{
		font-size: 13px;
		margin: 5px 0;
	}
	.cmt-title{
		background-color: #CCCCCC;
		line-height: 35px;
	}
	.cmt-body{
		line-height: 35px;
		text-indent: 2em;
	}
</style>